<template>
  <!-- 图例 -->
  <div class="legend_box" ref="legend" v-show="showLegendDialog">
    <h2 class="titleblue legend_title">
      <span>图例</span>
      <i class="close el-icon-close" @click="showLegendDialog = false" style="color: #fff; font-weight: normal;"></i>
    </h2>
    <div class="legend_main">
      <ul>
        <li v-for="(item, index) in shipShape" :key="index">
          <div class="ship_shape" :style="{'border-color': `transparent ${item.color} transparent transparent`}">
            <!--            <div class="ship_head" :style="{'border-color': `transparent ${item.shipColor} transparent transparent`}"></div>-->
          </div>
          <span>{{item.name}}</span>
        </li>
      </ul>
      <hr style="margin-bottom: 10px;">
      <div style="display:flex;align-items: center;">
        <img src="../../../assets/ship_icon_parked.png" style="width:20px;height:20px;object-fit: contain;margin-right:15px;margin-left:10px;"/>
        <span>航速小于0.3节</span>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: 'ShipLegend',
    props: ['map'],
    data() {
      return {
        showLegendDialog: false,
        shipShape: [
          {name: '客船类', color: '#3526F7'},
          {name: '普通货船类', color:'#21F55F'},
          {name: '液货船类', color:'#EF262E'},
          {name: '工程船类', color:'#F4E732'},
          {name: '工作船类', color:'#c0c0c0'},
          {name: '拖船类', color:'#92CCED'},
          {name: '其它类', color:'#A427EB'}
        ]
      }
    },
    watch: {
      map: {
        deep: false,
        handler (newMap, oldMap) {
          if (!newMap.ShipLegendLoaded) {
            // console.log('reload map.......')
            this.initControl()
          }
        }
      }
    },
    mounted () {
      this.initControl()
    },
    methods: {
      initControl() {
        this.map.ShipLegendLoaded = true
        let options = {
          position: 'topright',
          title: '显示图例',
          type: 'legend',
          iconClass: 'el-icon-picture'
        }
        L.control.iconcontrol(options).addTo(this.map)
        this.map.on('icon:legend', () => {
          this.showLegendDialog = !this.showLegendDialog
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .legend_box{
    width:280px;
    background: #fff;
    border-radius: 6px;
    z-index: 999;
    position: absolute;
    right: 50px;
    top: 150px;
    overflow: hidden;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
  }

  .legend_title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .close{
      line-height: 32px;
      cursor: pointer;
    }
  }


  .legend_main{
    padding: 20px;
    font-size: 14px;
    ul{
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    ul li {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 120px;
      margin-bottom: 14px;
      //padding-left: 10px;
      box-sizing: border-box;
    }
  }

  .ship_shape{
    width: 0;
    height: 0;
    position: relative;
    //box-shadow: 0px 0px 0 2px #000;
    margin-right: 20px;
    border-style: solid;
    //border-color: transparent #00ff00 transparent transparent;
    border-width: 6px 25px 6px 6px;
    &:after{
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      right: -28px;
      top: -10px;
      //box-shadow: 0px 0px 0 2px #000;
      border-style: solid;
      border-color: transparent #000 transparent transparent;
      border-width: 10px 34px 10px 10px;
      z-index: -1;
    }
  }

  .ship_action{
    width: 0;
    height: 0;
    position: relative;
    //box-shadow: 0px 0px 0 2px #000;
    margin-right: 20px;
    border-style: solid;
    //border-color: transparent #00ff00 transparent transparent;
    border-width: 6px 25px 6px 6px;
    &:after{
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      right: -43px;
      top: -13px;
      //box-shadow: 0px 0px 0 2px #000;
      border-style: solid;
      border-color: transparent #000 transparent transparent;
      border-width: 13px 51px 13px 10px;
      z-index: -1;
    }
  }
  .ship_stop{
    width: 12px;
    height: 12px;
    position: relative;
    margin: 0 20px 0 20px;
    transform: rotate(45deg);
    background: #fff;
    z-index: 10;
    &:after{
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      background: #000;
      //transform: rotate(45deg);
      left: -2px;
      top: -2px;
      z-index: -10;
    }

  }
  .ship_top:after{
    content: "";
    position: absolute;
    background: #fff;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
  }

  .ship_spot{
    position: absolute;
    width: 3px;
    height: 3px;
    background: #000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;

  }
  .ship_line{
    position: absolute;
    width: 11px;
    height: 1px;
    background: #000000;
    left: -20px;
    top: 8px;
  }
  .ship_head{
    position: absolute;
    width: 0;
    height: 0;
    left: -16px;
    top: 0px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent #00ff00 transparent transparent;
    //box-shadow: 0px 0px 0px 1px #000;
    &:before{
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      left: -13px;
      top: -10px;
      border-width: 10px;
      border-style: solid;
      border-color: transparent #000 transparent transparent;
      z-index: -1;
    }
  }
</style>
